<template>
  <el-container class="app_container flex">
    <Aside />
    <el-main class="app_main flex">
      <Breadcrumb :title="pageTitle" />
      <div class="app_content">
        <el-form ref="searchForm" :model="searchMap">
          <el-row class="flex serach_item">
            <el-button type="primary" class="btn_group_active">黑名单</el-button>
            <el-button type="primary" class="btn_group">白名单</el-button>
          </el-row>
          <el-row gutter="4">
            <el-col :span="5">
              <el-form-item prop="userName" size="small">
                <el-input v-model="searchMap.userName" placeholder="关键字搜索"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item class="flex">
                <el-button @click="handleSearch()" class="btn_primary" style="margin-right=10px;">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <transition name="fade">
          <el-table :data="alarmList" stripe class="per_table" style="width: 100%" height="250" v-loading="loading">
            <el-table-column prop="userId" label="序号"></el-table-column>
            <el-table-column prop="userName" label="人脸图片"></el-table-column>
            <el-table-column prop="nickName" label="姓名"></el-table-column>
            <el-table-column prop="deptName" label="生效时间"></el-table-column>
            <el-table-column prop="phonenumber" label="失效时间"></el-table-column>
            <el-table-column prop="phonenumber" label="告警原因"></el-table-column>
            <el-table-column key="status" label="备注">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <div class="button-group">
                  <span type="text" class="tag_primary" size="small" @click="handleEdit(scope.row, 'edit')">编辑</span>
                  <span type="text" class="tag_warning" size="small" @click="handleDelete(scope.row, 'delect')">删除</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </transition>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Aside from '@/components/Aside'
import Breadcrumb from '@/components/Breadcrumb'
export default {
  name: 'alarm',
  data () {
    return {
      searchMap: {
        page: 0,
        risk: 0,
        leave: ''
      },
      // 告警列表
      alarmList: []
    }
  },
  computed: {
    pageTitle () {
      return 'AI智能'
    }
  },
  watch: {},
  methods: {
    handleStatusChange(){}
  },
  components: {
    Aside,
    Breadcrumb
  }
}
</script>

<style lang='less'>
.serach_item {
  margin-bottom: 15px;
}
</style>